<template>
  <div>
    <con-title :topTitle="topTitle" />
    <el-card class="box-card">
      <el-table :data="securList" style="width: 100%">
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="tag" label="标签" width="180">
        </el-table-column>
        <el-table-column prop="id" label="密钥ID" width="180">
        </el-table-column>
        <el-table-column prop="authority" label="访问权限"> </el-table-column>
        <el-table-column label="在线状态">
          <template slot-scope="scope">
            {{ scope.row.online | onlineType }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.cTime | Btime }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            {{ scope.row.uTime | Btime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <!-- <template #default="scope"> -->
            <el-button type="text" size="small">重命名</el-button>
            <!-- @click="showDialog(scope.row.id, scope.row.groupName)" -->
            <el-button type="text" size="small">删除</el-button><!-- @click="delGroup(scope.row.id)" -->
          <!-- </template> -->
        </el-table-column>
      </el-table>
      <!-- 弹窗 -->
      <!-- <el-dialog :title="editId == '' ? '添加群组信息' : '修改群组信息'" :visible.sync="dialogVisible" width="30%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="群组名称" prop="name">
            <el-input type="input" v-model="ruleForm.name" placeholder="请输入群组名称"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleOK">确 定</el-button>
        </span>
      </el-dialog> -->
    </el-card>
  </div>
</template>

<script>
import { $secList} from "@/api";
import ConTitle from "@/components/ConTitle.vue";

export default {
  components: { ConTitle },
  name: "securityList",
  data() {
    return {
      topTitle: {
        type: "自定义类型",
        text: "测量类型",
        msg: "展示——————————————————————",
      },
      securList: [],
      dialogVisible: false, //弹窗是否显示
      ruleForm: {
        name: "",
      }, //需要提交的表单项
      rules: {
        name: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
      }, //需要验证的表单项
      editId: "", //修改的id   为空 就是添加  ，有值 就是修改
    };
  },
  mounted() {
    this.getsecList();
  },
  methods: {
    getsecList() {
      $secList().then((res) => {
        console.log(res);
        this.securList = res.data.data;
      });
    },
    // handleAdd() {
    //   this.dialogVisible = true;
    //   this.editId = "";
    //   this.ruleForm.name = "";
    // },
    // // 点击 弹窗的确定按钮触发的函数
    // handleOK() {
    //   console.log("弹窗需要关闭，添加一条记录");
    //   //验证 表单的input框是否添加了数据
    //   this.$refs.ruleForm.validate((valid) => {
    //     console.log(valid);
    //     if (valid) {
    //       console.log("验证成功");
    //       if (this.editId !== "") {
    //         //修改
    //         this.editItem();
    //       } else {
    //         //添加
    //         this.addItem();
    //       }
    //     } else {
    //       console.log("error");
    //       return false;
    //     }
    //   });
    // },
    // //添加
    // addItem() {
    //   //2.调用添加接口
    //   $secAdd({ name: this.ruleForm.name }).then((res) => {
    //     console.log(res);
    //     if (res.data.msg == "success") {
    //       //成功添加
    //       //1.关闭弹窗
    //       this.dialogVisible = false;
    //       this.getsecList();
    //     }
    //   });
    // },
    // //修改  $groupEdit
    // editItem() {
    //   $secEdit({ id: this.editId, name: this.ruleForm.name }).then(
    //     (res) => {
    //       console.log(res);
    //       if (res.data.msg == "success") {
    //         //成功添加
    //         //1.关闭弹窗
    //         this.dialogVisible = false;
    //         this.getsecList();
    //       }
    //     }
    //   );
    // },

    // //显示一下修改页面
    // showDialog(id, groupName) {
    //   this.dialogVisible = true;
    //   //给文本框赋值
    //   this.ruleForm.groupName = groupName;
    //   this.editId = id;
    // },
    // delGroup(id) {
    //   this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       $secDel({ id: id }).then((res) => {
    //         console.log(res);
    //         if (res.data.msg == "success") {
    //           this.$message({
    //             type: "success",
    //             message: "删除成功!",
    //           });
    //           //重新获取数据
    //           this.getsecList();
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },

  },
  filters: {
    onlineType(value) {
      return value ? "使用中" : "未使用";
    },
    Btime(val) {
      let d = new Date(+val);
      return (
        d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日"
      );
    },
  },
};
</script>

<style lang='scss' scoped>

.box-card {
  margin: 10px;
}
</style>